import React from 'react';
import { Typography, Space, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './style.less';

const { Title } = Typography;

export interface PageHeaderAction {
  key: string;
  label: string;
  icon?: React.ReactNode;
  type?: 'default' | 'primary' | 'dashed' | 'link' | 'text';
  onClick?: () => void;
}

interface PageHeaderProps {
  title: string;
  subtitle?: string;
  backButton?: boolean;
  backPath?: string;
  actions?: PageHeaderAction[];
  extra?: React.ReactNode;
  className?: string;
}

const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  subtitle,
  backButton = false,
  backPath,
  actions = [],
  extra,
  className = '',
}) => {
  const navigate = useNavigate();

  const handleBack = () => {
    if (backPath) {
      navigate(backPath);
    } else {
      navigate(-1);
    }
  };

  return (
    <div className={`page-header ${className}`}>
      <div className="page-header-left">
        {backButton && (
          <Button
            type="text"
            icon={<ArrowLeftOutlined />}
            onClick={handleBack}
            className="back-button"
          />
        )}
        <div className="title-container">
          <Title level={4} className="page-title">
            {title}
          </Title>
          {subtitle && <div className="page-subtitle">{subtitle}</div>}
        </div>
      </div>
      <div className="page-header-right">
        {actions.length > 0 && (
          <Space>
            {actions.map((action) => (
              <Button
                key={action.key}
                type={action.type || 'default'}
                icon={action.icon}
                onClick={action.onClick}
              >
                {action.label}
              </Button>
            ))}
          </Space>
        )}
        {extra}
      </div>
    </div>
  );
};

export default PageHeader;